<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="./../util/jquery-3.4.0.js"></script>
    <script src="./../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
            color: #666666;
        }
        body{
            background: #f3f3f3;
            width: 100%;
        }
        .blacklistTit{
            width:1100px;
            background: #f3f3f3;
            font-size: 25px;
            height: 30px;
            padding-left: 45px;
            line-height: 30px;
            margin-bottom: 15px;
            margin-top: 40px;
        }
        .blacklistTit-loveme,.blacklistTit-mylove{
            float: left;
            color: #222222;
            /*overflow: hidden;*/
        }
        .blacklistLine{
            width: 3px;
            /*background: black;*/
            color: #222222;
        }
        #blacklistBox{
            width: 1100px;
            background: white;
            /*height: 100%;*/
            overflow: hidden;
            margin: 0 0 0 45px;
            height: 700px;
        }

        .blacklistContext{
            border-bottom: #cccccc dashed 1px;
            margin-bottom: 20px;
            margin-top: 30px;
            height: 40px;
        }
        .blacklistContext-div1{
            font-size: 20px;
            color: #333333;
            padding-bottom: 10px;
            margin-left: 10px;
            float: left;
        }
        .blacklistContext-div2{
            float: right;
        }
        .blacklistContext-div2-div{
            font-size: 12px;
            color: #666666;
            line-height: 26px;
            margin-top: 2px;
            float: left;
            width: 60px;
        }
        .blacklist-allCheck-la span{
            margin: 0 3px;
        }
        .blacklist-allCheck{
            margin-top: 6px;
            width: 17px;
            height: 17px;
            margin-right: 4px;
            cursor: pointer;
            float: left;
        }
        .blacklistContext-div2 span{
            float: left;
        }
        .noblacklist{
            width: 100px;
            height: 30px;
            margin-top: -3px;
            margin-right: 20px;
            line-height: 20px;
        }
        .noblacklist:hover{
            background: #fd7c4f;
            color: gainsboro;
        }
        .blacklistshow{
            margin-left: 16px;
            overflow: hidden;
            height: 100%;
        }
        .blacklistshow-li0{
            width: 344px;
            height: 164px;
            background:#f3f3f3 ;
            float: left;
            overflow: hidden;
            margin-top: 20px;
        }

        .blacklistshow-checkli0{
            float: right;
            width: 17px;
            height: 17px;
            display: none;
            /*margin: 10px 150px 0 0;*/
        }
        .blacklistshow-con{
            margin: 22px 15px 15px 15px;
            /*background: yellow;*/
        }
        .blacklistshow-left{
            width: 104px;
            height: 120px;
            line-height: 120px;
            float: left;
            border-right: 1px solid #d5d5d5;
        }
        .blacklistshow-loge{
            width: 76px;
            height: 76px;
            margin-left:10px;
            margin-right: 15px;
        }
        .blacklistshow-play{
            float: left;
            width: 150px;
            height: 20px;
            margin:10px 0 13px 15px;
            font-size:18px;
            color: black;
        }
        .blacklistshow-dj{
            float: left;
            position: relative;
        }
        .blacklistshow-dj-sum{
            float: left;
            position: absolute;
            color: #af5320;
            font-size: 12px;
            margin-left: 45px;
            line-height: 30px;
        }
        .blacklistshow-dj-img{
            margin: -3px 0 8px 15px;
        }
        .blacklistshow-dj-name{
            font-size: 12px;
        }
        .blacklistshow-dj-gz{
            margin: 5px 0 20px 15px ;
            /*background:#de6439;*/
            background: #fd7c4f;
            color: white;
            border-radius: 5px;
            border: 1px solid #fd7c4f;
            width: 100px;
            height: 30px;
        }
        .blacklistshow-dj-gz:hover{
            background:#de6439;
        }
        .blacklistTit-mylove.active{
            color:#de6439;
        }
    </style>
</head>
<body>
    <div class="blacklistTit">
    <a href="#" class="blacklistTit-mylove active"><span class="blacklistLine"> | </span>黑名单管理</a>
</div>
    <div id="blacklistBox">
            <div class="blacklistContext">.
                <div class="blacklistContext-div1">全部黑名单（<span class="blacklistContext-mun">3</span>）</div>
                <!--<div class="blacklistContext-div2">-->
                    <!--<div class="blacklistContext-div2-div">-->
                         <!--<label class="blacklist-allCheck-la">-->
                              <!--<input type="checkbox" class="blacklist-allCheck"><span>全选</span>-->
                         <!--</label>-->
                    <!--</div>-->
                        <!--<button class="btn noblacklist">-->
                            <!--<img src="https://res.tuwan.com/templet/play/attent/images/blacklist.png" alt="">-->
                            <!--取消关注-->
                        <!--</button>-->
                <!--</div>-->
            </div>
            <ul class="blacklistshow">
                <li class="blacklistshow-li0">
                    <input type="checkbox" class="blacklistshow-checkli0">
                    <div class="blacklistshow-con" style="width: 300px;">
                        <div class="blacklistshow-left">
                            <img class="blacklistshow-loge img-circle" src="https://ucavatar.tuwan.com/data/avatar/001/20/43/25_avatar_middle.jpg?random=1560747487" alt="">
                        </div>
                        <div class="blacklistshow-riget">
                            <a href="#" class="blacklistshow-play">黑名单黑名单</a>
                            <div class="blacklistshow-dj">
                                <p class="blacklistshow-dj-sum">8</p>
                                <img class="blacklistshow-dj-img" src="https://res.tuwan.com/templet/play/teacher/images/jibie_03.png?0009">
                                <span class="blacklistshow-dj-name">魅力值:55556666</span>
                            </div>
                            <button class="blacklistshow-dj-gz">
                                <img src="https://res.tuwan.com/templet/play/attent/images/follow_hover.png" alt="">取消黑名单</button>
                        </div>
                    </div>
                </li>
            </ul>
   </div>
    
    <!--</div>-->
</body>
<script>
</script>
</html>